<template>
  <el-form inline>
    <el-form-item>
      <el-select
          v-if="showSchool"
          v-model="theSchoolCode"
          @change="onSchoolChange"
          clearable
          filterable
          @clear="clearSchool"
          placeholder="请选择学校"
      >
        <el-option
            v-for="item in schoolList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select
          v-if="showDept"
          v-model="theDeptCode"
          filterable
          placeholder="请选择院系"
          @change="onDeptChange"
          clearable
          @clear="clearDept"
      >
        <el-option
            v-for="item in deptList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select
          v-if="showClass"
          v-model="theClassCode"
          @change="updateClassCode"
          filterable
          placeholder="请选择班级"
          clearable
          @clear="clearClass"
      >
        <el-option
            v-for="item in classList"
            :key="item.value"
            :label="item.name"
            :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import schoolDeptClassSelection from "@/mixins/business/schoolDeptClassSelection"

export default {
  name: "SchoolDeptClassSelection",
  mixins: [schoolDeptClassSelection],
  props: {
    showSchool: Boolean,
    showDept: Boolean,
    showClass: Boolean,
    schoolCode: String,
    deptCode: String,
    classCode: String
  },
  watch: {
    schoolCode: {
      immediate: true,
      handler(n) {
        this.theSchoolCode = n
      }
    },
    deptCode: {
      immediate: true,
      handler(n) {
        this.theDeptCode = n
      }
    },
    classCode: {
      immediate: true,
      handler(n) {
        this.theClassCode = n
      }
    }
  },
  data() {
    return {
      theSchoolCode: "",
      theDeptCode: "",
      theClassCode: ""
    }
  },
  methods: {
    updateSchoolCode(v) {
      this.$emit('update:schoolCode', v)
    },
    updateDeptCode(v) {
      this.$emit('update:deptCode', v)
    },
    updateClassCode(v) {
      this.$emit('update:classCode', v)
    }
  },
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 0;
}
</style>
